import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, PixelRatio, ListView, ActivityIndicator, Modal } from 'react-native';
import { GLOBAL } from '../config/global';
import { style } from '../theme/style';

const scale = GLOBAL.SCALE;
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

export default class ModalAreaComponent extends Component {

	constructor(props) {
		super(props);
		this.state = {
			provinceList: [],
			cityList: [],
			areaList: [],
			provinceCur: {},
			cityCur: {},
			areaCur: {},
			load: true,
		}
		this.productArray = [];
		let { selectCustom } = this.props;
		this.selectCustom = selectCustom;
		this.renderCategory1 = this.renderCategory1.bind(this);
		this.renderCategory2 = this.renderCategory2.bind(this);
		this.renderCategory3 = this.renderCategory3.bind(this);
	}

	// 默认属性设置
	static defaultProps = {
		visible: false
	};

	async componentWillMount () {
		this.provinceList = this.props.addressInfo;
		if (this.provinceList) {
			let cityList, areaList, provinceCur, cityCur, areaCur;
			const provinceList = this.provinceList.map((province, i) => {
				const { areaInfoVO, children } = province;
				const { areaId, areaName } = areaInfoVO;

				if (i == 0) {
					cityList = children;
					provinceCur = { areaId, areaName };
				}


				return { areaId, areaName }

			})

			if (cityList && cityList.length) {
				cityList = cityList.map((city, i) => {
					const { areaInfoVO, children } = city;
					const { areaId, areaName } = areaInfoVO;

					if (i == 0) {
						if (children && children.length) {
							areaList = children;
						} else {
							areaList = [{
								areaInfoVO: {
									areaId,
									areaName: '市区',
								}
							}]
						}
						cityCur = this.selectCustom ? { areaId: '', areaName: '' } : { areaId, areaName };
					}


					return { areaId, areaName }

				})
			}

			if (areaList && areaList.length) {
				areaList = areaList.map((area, i) => {
					const { areaInfoVO, } = area;
					const { areaId, areaName } = areaInfoVO;

					if (i == 0) {
						areaCur = this.selectCustom ? { areaId: '', areaName: '' } : { areaId, areaName };
					}
					return { areaId, areaName }

				})
			}

			const load = false;
			this.setState({
				provinceList, cityList, areaList, provinceCur, cityCur, areaCur, load
			});
		}

	}

	render () {
		const { visible, cancelPress } = this.props;
		const { provinceList, cityList, areaList, provinceCur, cityCur, areaCur, load } = this.state;
		const provinceSource = ds.cloneWithRows(provinceList);
		const citySource = ds.cloneWithRows(cityList);
		const areaSource = ds.cloneWithRows(areaList);
		const listView = load ? <View style={styles.loadBox}><View style={styles.loadedCell}><ActivityIndicator
			animating={true}
			color={'#fff'}
			size="small"
		/></View></View> :
			<View style={styles.listViewCell}>
				<ListView
					style={styles.listView}
					dataSource={provinceSource}
					renderRow={this.renderCategory1}
				/>
				<ListView
					style={[styles.listView, styles.listCol]}
					dataSource={citySource}
					renderRow={this.renderCategory2}
				/>
				<View style={{ width: 175 * scale, }}>
					<ListView
						style={styles.listView}
						dataSource={areaSource}
						renderRow={this.renderCategory3}
					/>
				</View>
			</View>;

		return (
			<Modal animationType={"slide"}
				transparent={true}
				visible={visible}
				onRequestClose={() => { }}>
				<View style={styles.container}>
					<View style={styles.wrap}>

						<View style={styles.head}>
							<TouchableOpacity onPress={
								cancelPress} activeOpacity={0.5}>
								<Text style={styles.headText}>取消</Text>
							</TouchableOpacity>
							<Text style={[styles.headText, { fontSize: 18 * scale, color: '#404040' }]}>选择地区</Text>
							<TouchableOpacity onPress={this._didPressConfirm.bind(this)} activeOpacity={0.5}><Text style={styles.headText}>确定</Text>
							</TouchableOpacity>
						</View>
						{listView}
					</View>
				</View>
			</Modal >
		);
	}

	_didPressConfirm () {
		const { confirmPress, selectCustom } = this.props;
		const { provinceCur, cityCur, areaCur } = this.state;
		const { areaId } = areaCur
		if (selectCustom || (areaId && areaId.length)) {
			confirmPress({
				province: provinceCur,
				city: cityCur,
				area: areaCur,
			});
		}

	}

	renderCategory3 (category) {
		const { areaId, areaName, } = category;
		const { areaCur } = this.state;
		const style = (areaId == areaCur.areaId) ? styles.curCategory : null;
		return (
			<TouchableOpacity onPress={this._didPressCategory3.bind(this, category)} activeOpacity={0.5} style={[styles.category2, style]}>
				<Text style={styles.text}>{areaName}</Text>
			</TouchableOpacity>
		);
	}

	renderCategory1 (category) {
		const { areaId, areaName, } = category;
		const { provinceCur } = this.state;
		const style = (areaId == provinceCur.areaId) ? styles.curCategory : null;
		return (
			<TouchableOpacity onPress={this._didPressCategory1.bind(this, areaId)} activeOpacity={0.5} style={[styles.category1, style]}>
				<Text style={styles.text}>{areaName}</Text>
			</TouchableOpacity>
		);
	}

	_didPressCategory1 (param) {
		let { provinceCur, cityCur, cityList, areaCur, areaList } = this.state;
		if (param != provinceCur.areaId) {
			// const param = areaId;
			this.provinceList.forEach((category1) => {
				const { children, areaInfoVO } = category1;
				const { areaId, areaName } = areaInfoVO;
				if (areaId == param) {
					provinceCur = { areaId, areaName };
					if (children && children.length) {
						cityList = children.map((category2, index2) => {
							const { areaInfoVO, children } = category2;
							const { areaId, areaName } = areaInfoVO;
							if (index2 == 0) {
								if (this.selectCustom) {
									cityCur = { areaId: '', areaName: '' }
									areaCur = { areaId: '', areaName: '' }
								} else {
									cityCur = { areaId, areaName }
								}
								if (children && children.length) {
									areaList = children.map((category3, index3) => {
										const { areaInfoVO, } = category3;
										const { areaId, areaName } = areaInfoVO;
										return { areaId, areaName }
									})
								}
							}
							return { areaId, areaName, }
						})
					}
				}
			});
			this.setState(
				{ provinceCur, cityCur, cityList, areaList, areaCur }
			);
		}
	}

	renderCategory2 (category) {
		const { areaId, areaName, } = category;
		const { cityCur } = this.state;
		const style = (areaId == cityCur.areaId) ? styles.curCategory : null;
		return (
			<TouchableOpacity onPress={this._didPressCategory2.bind(this, areaId)} activeOpacity={0.5} style={[styles.category1, style]}>
				<Text style={styles.text}>{areaName}</Text>
			</TouchableOpacity>
		);
	}

	_didPressCategory2 (param) {
		let { provinceCur, cityCur, areaCur, areaList } = this.state;
		// const param = areaId;
		if (param != cityCur.areaId) {
			this.provinceList.forEach((category1) => {
				const { areaInfoVO, children } = category1;
				const { areaId, } = areaInfoVO;
				if (provinceCur.areaId == areaId) {
					if (children && children.length) {
						children.forEach((category2) => {
							const { children, areaInfoVO } = category2;
							const { areaId, areaName } = areaInfoVO;
							if (areaId == param) {
								cityCur = { areaId, areaName }
								if (this.selectCustom) {
									areaCur = { areaId: '', areaName: '' }
								}
								if (children && children.length) {
									areaList = children.map((category3) => {
										const { areaInfoVO, } = category3;
										const { areaId, areaName } = areaInfoVO;
										return { areaId, areaName, }
									})
								} else {
									areaList = [{
										areaId,
										areaName: '市区',
									}]
								}
							}
						});

					}
				}
			});
			this.setState(
				{ cityCur, areaList, areaCur }
			);
		}
	}

	_didPressCategory3 (param) {
		let { areaCur, cityCur, cityList } = this.state;
		const { areaId } = areaCur;
		console.log(cityList)
		if (this.selectCustom && !cityCur.areaId) {
			cityCur = { areaId: cityList[0].areaId, areaName: cityList[0].areaName }
		}
		if (param.areaId != areaId) {
			this.setState({
				areaCur: param,
				cityCur
			});

		}

	}
}

const styles = StyleSheet.create({
	optionPic: {
		width: 14 * scale,
		height: 14 * scale,
	},
	category1: {
		height: 50 * scale,
		justifyContent: 'center',
		alignItems: 'center',

	},
	category2: {
		height: 50 * scale,
		alignItems: 'center',
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingLeft: 13 * scale,
		paddingRight: 22 * scale,
	},
	curCategory: {
		backgroundColor: '#F8F8F8',
	},
	loadedCell: {
		width: 75 * scale,
		height: 75 * scale,
		backgroundColor: 'rgba(0, 0, 0, .5)',
		borderRadius: 7,
		justifyContent: 'center',
		alignItems: 'center',
	},
	listView: {
		flex: 1,
	},
	listCol: {
		borderLeftColor: '#e4e4e4',
		borderLeftWidth: 1 / PixelRatio.get(),
		borderRightColor: '#e4e4e4',
		borderRightWidth: 1 / PixelRatio.get(),
	},
	listViewCell: {
		flex: 1,
		flexDirection: 'row',
		borderTopColor: '#e4e4e4',
		borderTopWidth: 1 / PixelRatio.get(),
	},
	loadBox: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		borderTopColor: '#e4e4e4',
		borderTopWidth: 1 / PixelRatio.get(),
	},
	head: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		height: 52 * scale,
		width: 375 * scale,
		alignItems: 'center',
	},
	headText: {
		fontSize: 16 * scale,
		color: style.color.themeColor,
	},
	wrap: {
		backgroundColor: '#fff',
		width: 375 * scale,
		height: GLOBAL.SCREEN_HEIGHT * 0.7 * scale,
	},
	text: {
		fontSize: 13 * scale,
		color: '#404040'
	},
	container: {
		width: 375 * scale,
		height: GLOBAL.SCREEN_HEIGHT,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		justifyContent: 'flex-end',
	},
})